<template>
  <div class="sf-tab" :class="[{'tab-top-border': topBorder, 'tab-card': card}]">
    <div
      v-for="item in tabs"
      v-show="item.showTab !== 'hide'"
      :key="item.value"
      :style="{ 'line-height': lineHeihgt }"
      class="tab-item"
      :class="[{ 'tab-active': activeName == item.value }]"
      @click="handleClick(item.value, item)"
    >
      <span>
        {{ item.name }}
        <span v-if="item.num">({{ item.num }})</span>
      </span>
    </div>
    <div class="global-nav-op">
      <slot name="button" />
    </div>
  </div>
</template>
<script> 
export default {  
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeName: {
      type: String | Number,
      default: ''
    },
    lineHeihgt: {
      type: String,
      default: ''
    },
    topBorder: {
      type: Boolean,
      default: false
    },
    card: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick(v, data) {
      if (this.isAllReturn) {
        this.$emit('handleTabClick', {
          activeName: v,
          data
        })
      } else {
        this.$emit('handleTabClick', v)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.sf-tab {
  min-height: 35px;
  color: #333;
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  .tab-top-border {
    border-top: 1px solid #dcdfe6;
  }
  &.tab-card {
    padding: 10px 10px;
    border-radius: 8px;
  }
  // border-top: 1px solid #dcdfe6;
  .tab-item {
    line-height: 35px;
    display: inline-block;
    margin-right: 30px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    letter-spacing: 0px;
    color: #727373;
    &.line-right::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 12px;
      height: 40px;
      width: 1px;
      background-color: #ebeef5;
      border: none;
      // transform: scaleX(.5);
    }
    &:hover {
      color: #409EFF;
    }
  }
  .tab-active {
    color: #409EFF;
    font-weight: 700;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      bottom: 0px;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      border-top: solid 2px transparent;
      border-bottom: solid 2px #409EFF;
      border-left: solid 2px transparent;
      border-right: solid 2px transparent;
    }
  }
  .global-nav-op {
    max-width: 165px;
    float: right;
  }
}
</style>
